<!--
 * @Author: ChunLai
 * @Date: 2022-04-06 14:11:22
 * @LastEditTime: 2025-09-05 08:53:01
 * @Description: 业务员信息(双录展示)
 * @FilePath: \02.bldinsure\src\views\sign\components\DoubleRecord.vue
-->
<template>
  <div>
    <div class="mode2 mt10">
      <div class="flex-lr mode2_top">
        <span class="tt_l">业务员信息</span>
        <span
          class="tt_v"
          @click="preview(agentInfo.certificateImg)"
          v-if="agentInfo.certificateImg"
        >
          查看执业资格证<span class="ms-row-icon ml4 size12"></span>
        </span>
      </div>
      <div class="li_cell">
        <div class="cell_label">业务员工号</div>
        <div class="cell_value">{{ workNum }}</div>
      </div>
      <div class="li_cell">
        <div class="cell_label">执业证编号</div>
        <div class="cell_value">{{ agentInfo.certificate }}</div>
      </div>
      <!-- 双录对接展示信息 -->
      <div class="dr_ewm_box" v-if="showDRInfo">
        <div class="ewm_box" v-if="drEwmImage">
          <div class="loading_box" v-if="ewmLoading">
            <van-loading type="spinner" color="#1989fa" />
          </div>
          <img :src="drEwmImage" alt="" v-else />
        </div>
        <div
          class="flx-sa"
          :class="drEwmImage ? '' : 'mt14'"
          v-if="doubleRecordEwmApi"
        >
          <span class="act_btn replay" @click="getDrecordEwm">
            <MsImgIcon size="14" name="refresh" class="mr6" /> 刷新二维码
          </span>
          <span class="act_btn query" @click="getDrecordResultQuery(true)">
            双录质检结果查询
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { ImagePreview } from "vant";
export default {
  name: "DoubleRecord",
  data() {
    return {
      ewmLoading: false,
      showCard: false,
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      workNum: "insert/workNum",
      agentInfo: "agent/agentInfo",
      LicentiateUrl: "agent/LicentiateUrl",
      drEwmImage: "page/drEwmImage",
      // isNeedDouble: "insert/isNeedDouble",
      doubleRecordEwmApi: "page/doubleRecordEwmApi",
      doubRecordAbutment: "page/doubRecordAbutment",
    }),
    showDRInfo() {
      let res = false;
      if (this.doubRecordAbutment && this.isNeedDouble == "1") {
        res = true;
      }
      return res;
    },
  },
  mounted() {
    if (this.showDRInfo) {
      this.initModuleData();
    }
  },
  methods: {
    preview(imgurl) {
      ImagePreview([imgurl]);
    },
    initModuleData() {
      if (this.doubleRecordEwmApi) {
        this.getDrecordEwm();
      }
      this.getDrecordResultQuery();
    },
    getDrecordEwm() {
      this.ewmLoading = true;
      this.$http
        .post("/ms-insure/api/common/getDoubleQRCode", this.apiComParams, {
          json: true,
        })
        .then(
          ({ data }) => {
            this.ewmLoading = false;
            if (data.code == "1") {
              this.$store.commit("page/SET_DR_IMAGE", data.url || "");
            } else {
              this.$msAlert(data.msg);
            }
          },
          (err) => {
            this.ewmLoading = false;
          }
        );
    },
    getDrecordResultQuery(showTip = false) {
      this.$store.commit("updateLoad", true);
      this.$http
        .post(
          "/ms-insure/api/common/doubleCheckResultQuery",
          this.apiComParams,
          {
            json: true,
          }
        )
        .then(
          ({ data }) => {
            this.$store.commit("updateLoad", false);
            this.$store.commit("page/SET_DR_RESULT", data.isPass || "0");
            if (showTip) {
              this.$msAlert(data.msg);
            }
          },
          (err) => {
            this.$store.commit("updateLoad", false);
          }
        );
    },
  },
};
</script>

<style lang="less" scoped>
.mode2 {
  padding: 0 12px 10px 12px;
  background-color: #ffffff;

  .mode2_top {
    height: 40px;

    .tt_l {
      font-size: 16px;
      font-weight: 600;
      font-family: MiSans;
      color: rgba(36, 36, 36, 1);
    }

    .tt_v {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-weight: 400;
      color: rgba(52, 52, 52, 1);
    }
  }
}
.ewm_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.act_btn {
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  position: relative;
  &::before {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
  }
  &.query {
    color: #f54040;
    background-color: #fff0f0;
    &::before {
      border: 1px solid #f54040;
    }
  }
  &.replay {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #409eff;
    background-color: #ecf5ff;
    &::before {
      border: 1px solid #409eff;
    }
  }
}
.loading_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
}
</style>
